<script setup lang="ts">
import { MsgEnum } from '@/enums'
import type { MsgType } from '@/services/types'
import Image from './image.vue'
import File from './file.vue'
import Text from './text.vue'
import Emoji from './emoji.vue'
import Project from './project.vue'
import { useUserStore } from '@/stores/user'

const componentMap = {
  [MsgEnum.UNKNOWN]: '',
  [MsgEnum.TEXT]: Text,
  [MsgEnum.RECALL]: '',
  [MsgEnum.SYSTEM]: '',
  [MsgEnum.IMAGE]: Image,
  [MsgEnum.FILE]: File,
  [MsgEnum.PROJECT]: Project,
  [MsgEnum.EMOJI]: Emoji,
}

const userStore = useUserStore()

defineProps<{ message: MsgType }>()
</script>

<template>
  <component
    :is="componentMap[message.type]"
    :body="message.body"
    :data-message-id="message.messageId"
    :draggable="userStore.isSign ? 'true' : 'false'"
  />
</template>
